<div class="panel panel-default" ng-controller="AccountBkCtrl">
    <div class="panel-heading">
        订票管理 / 统计对账  <span><small>(建议查询时间范围不超过一个月)</small></span>
    </div>
    <toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
    <div class="row wrapper m-n">
        <form class="bs-example form-horizontal ng-pristine ng-valid">
            <div class="form-group col-md-3" ng-controller="DatepickerDemoCtrl">
                <div class="col-md-11">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-init="selected_format=formats[1]" datepicker-popup="{{selected_format}}" is-open="opened" ng-model="timeRange.startTime" datepicker-options="dateOptions"
                            close-text="Close" placeholder="开始日期" readOnly />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group col-md-3" ng-controller="DatepickerDemoCtrl">
                <div class="col-md-11">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-init="selected_format=formats[1]" datepicker-popup="{{selected_format}}" is-open="opened" ng-model="timeRange.endTime" datepicker-options="dateOptions"
                            close-text="Close" placeholder="结束日期" readOnly />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
			<div class="form-group col-md-3">
				<div class="col-md-11">
					<div class="input-group">
						<ui-select ng-model="stations.selected" theme="bootstrap">
						<ui-select-match placeholder="客运站">{{$select.selected.name}}</ui-select-match>
						<ui-select-choices
							repeat="sta in stations | propsFilter: {name: $select.search}">
						<span ng-bind-html=" sta.name| highlight: $select.search"></span>
						</ui-select-choices> </ui-select>
						<span class="input-group-btn">
							<button ng-click="stations.selected = undefined"
								class="btn btn-default">
								<span class="glyphicon glyphicon-trash"></span>
							</button>
						</span>
					</div>
				</div>
			</div>
            <div class="form-group col-md-4">
                <div class="col-md-3">
                    <button type="button" class="btn btn-info" ng-click="query()">查询</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-info" ng-click="exportIncome()">收入报表</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-info" ng-click="exportExpend()">支出报表</button>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-body">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">收入报表</div>
                <div class="panel-body">
                    <div ui-jq="plot" ui-refresh="in" ui-options="
                    [
                        { data: {{in.ali}}, label: '支付宝' },
                        { data: {{in.wx}}, label: '微信' },
                        { data: {{in.wxh5}}, label: '微信公众号' },
                    ],
                    {
                        bars: {
                            show: true,
                            fill: true,
                            barWidth: 18000000,
                            lineWidth: 0.1,
                            order: 1,
                            fillColor: { colors: [{ opacity: 1.0 }, { opacity: 0.8}] }
                        },
                        xaxis: {
                            mode: 'time',
                            timezone: 'browse',
                            timeformat: '%m/%d',
                            tickSize: [1, 'day'],
                            minTickSize: [1, 'day'],
                            min: {{min}},
                            max: {{max}},
                            font: { color: '#000' }
                        },
                        yaxis: {
                            font: { color: '#000' }, min: 0, max: {{in.max}}
                        },
                        grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#777' },
                        series: { shadowSize: 1 },
                        tooltip: true,
                        tooltipOpts: {
                            show: true,
                            content: '%x %s 入账%y元',
                            xDateFormat: '%m/%d',
                            defaultTheme: false
                        }
                    }" style="height:400px"></div>
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">支出报表</div>
                <div class="panel-body">
                    <div ui-jq="plot" ui-refresh="outs" ui-options="
                    [
                        { data: {{outs.ali}}, label: '支付宝' },
                        { data: {{outs.wx}}, label: '微信' },
                        { data: {{outs.wxh5}}, label: '微信公众号' },
                    ],
                    {
                        bars: {
                            show: true,
                            fill: true,
                            barWidth: 18000000,
                            lineWidth: 0.1,
                            order: 1,
                            fillColor: { colors: [{ opacity: 1.0 }, { opacity: 0.8}] }
                        },
                        xaxis: {
                            mode: 'time',
                            timezone: 'browse',
                            timeformat: '%m/%d',
                            tickSize: [1, 'day'],
                            minTickSize: [1, 'day'],
                            min: {{min}},
                            max: {{max}},
                            font: { color: '#000' }
                        },
                        yaxis: {
                            font: { color: '#000' }, min: 0, max: {{outs.max}}
                        },
                        grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#777' },
                        series: { shadowSize: 1 },
                        tooltip: true,
                        tooltipOpts: {
                            show: true,
                            content: '%x %s 退款%y元',
                            xDateFormat: '%m/%d',
                            defaultTheme: false
                        }
                    }" style="height:400px"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="panel panel-default" ng-controller="AgencyAccountBkCtrl">
    <div class="panel-heading">
        订票管理 / 统计对账 / 代售点
    </div>
    <div class="row wrapper m-n">
        <form class="bs-example form-horizontal ng-pristine ng-valid">
            <div class="form-group col-md-3" ng-controller="DatepickerDemoCtrl">
                <div class="col-md-11">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-init="selected_format=formats[1]" datepicker-popup="{{selected_format}}"  is-open="opened" ng-model="timeRange.startTime" datepicker-options="dateOptions"
                            close-text="Close" placeholder="开始日期" readOnly />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
            <div class="form-group col-md-3" ng-controller="DatepickerDemoCtrl">
                <div class="col-md-11">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-init="selected_format=formats[1]" datepicker-popup="{{selected_format}}"  is-open="opened" ng-model="timeRange.endTime" datepicker-options="dateOptions"
                            close-text="Close" placeholder="结束日期" readOnly />
                        <span class="input-group-btn">
                            <button type="button" class="btn btn-default" ng-click="open($event)">
                                <i class="glyphicon glyphicon-calendar"></i>
                            </button>
                        </span>
                    </div>
                </div>
            </div>
			<div class="form-group col-md-3">
				<div class="col-md-11">
					<div class="input-group">
						<ui-select ng-model="agencyList.selected" theme="bootstrap">
						<ui-select-match placeholder="代售点">{{$select.selected.name}}</ui-select-match>
						<ui-select-choices
							repeat="sta in agencyList | propsFilter: {name: $select.search}">
						<span ng-bind-html=" sta.name| highlight: $select.search"></span>
						</ui-select-choices> </ui-select>
						<span class="input-group-btn">
							<button ng-click="agencyList.selected = undefined"
								class="btn btn-default">
								<span class="glyphicon glyphicon-trash"></span>
							</button>
						</span>
					</div>
				</div>
			</div>
            <div class="form-group col-md-3">
                <div class="col-md-3">
                    <button type="button" class="btn btn-info" ng-click="query()">查询</button>
                </div>
                <div class="col-md-4">
                    <button type="button" class="btn btn-info" ng-click="exportAgency()">代售报表</button>
                </div>
            </div>
        </form>
    </div>
    <div class="panel-body">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading font-bold">代售点报表</div>
                <div class="panel-body">
                    <div ui-jq="plot" ui-refresh="in" ui-options="
                    [
                        { data: {{in.agency}}, label: '代售统计' },
                    ],
                    {
                        bars: {
                            show: true,
                            fill: true,
                            barWidth: 18000000,
                            lineWidth: 0.1,
                            order: 1,
                            fillColor: { colors: [{ opacity: 1.0 }, { opacity: 0.8}] }
                        },
                        xaxis: {
                            mode: 'time',
                            timezone: 'browse',
                            timeformat: '%m/%d',
                            tickSize: [1, 'day'],
                            minTickSize: [1, 'day'],
                            min: {{min}},
                            max: {{max}},
                            font: { color: '#000' }
                        },
                        yaxis: {
                            font: { color: '#000' }, min: 0, max: {{in.max}}
                        },
                        grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#777' },
                        series: { shadowSize: 1 },
                        tooltip: true,
                        tooltipOpts: {
                            show: true,
                            content: '%x %s 销售%y元',
                            xDateFormat: '%m/%d',
                            defaultTheme: false
                        }
                    }" style="height:400px"></div>
                </div>
            </div>
        </div>
    </div>
</div>